<template>
  <div class="document-update-log">
    <div class="title" v-if="!noHeader">{{$t('wiki.component.updateLog.title1')}}</div>

    <div class="document-timeline" ref="timeline">
      <base-timeline 
        :data="recordPage.list" 
        :record-render="renderRecord" 
        :loading="recordLoading"
        :loadmore="recordPage.hasNextPage"
        @load="loadmore"/>
    </div>
  </div>
</template>

<script>
import { isOpenData } from '@src/util/platform';
import Page from '@model/Page';
import * as RepositoryApi from '@src/api/Repository'
import { formatDate } from 'pub-bbx-utils';
/* mixin */
import { ConnectorModuleConnectorRecordMixin, ConnectorModuleTriggerRecordMixin } from '@src/modules/connector';
import { t } from '@src/locales'

export default {
  name: 'update-log',
  mixins: [ConnectorModuleConnectorRecordMixin, ConnectorModuleTriggerRecordMixin],
  props: {
    wikiId: {
      type: String,
      default: ''
    },
    noHeader: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      recordPage: new Page(),
      recordLoading: false,
      params: {
        wikiId: this.wikiId,
        pageNum: 1,
        pageSize: 15,
      },
    }
  },
  mounted () {
    this.getRecord();
  },
  methods: {
    // 编辑时获取文章日志
    async getRecord () {
      try{
        let res = await RepositoryApi.getRecord(this.params);

        if(res.success) {
          this.recordPage.list = [];
          this.recordPage.merge(res.result);
          this.recordPage.list.forEach(item => {
            item.createTime = formatDate(item.createTime);
          })
        } else {
          this.$platform.notification({
            title: res.message,
            type: 'error',
          });
        }
      } catch(err) {
        console.error(err)
      }
    },

    // 加载下一页
    async loadmore() {
      try {
        this.params.pageNum++;
        this.recordLoading = true;
        let res = await RepositoryApi.getRecord(this.params);
        if(res.success) {
          this.recordLoading = false;
          this.recordPage.merge(res.result);
          this.recordPage.list.forEach(item => {
            item.createTime = formatDate(item.createTime);
          })
        } else {
          this.$platform.notification({
            title: res.message,
            type: 'error',
          });
        }
      } catch (error) {
        console.error(error)
      }
    },
    
    /** 根据记录的action渲染对应的内容，支持jsx和render函数 */
    renderRecord (h, item) {
      let {action, userName, content, staffId} = item;

      if(action == '编辑') {
        return [
          <i18n path="common.record.repository.edit" tag="h5" class="main-info">
            <span place="operator">{this.renderUserName(userName, staffId)}</span>
          </i18n>
        ]
      }

      if(action == '新建') {
        return [
          <i18n path="common.record.repository.add" tag="h5" class="main-info">
            <span place="operator">{this.renderUserName(userName, staffId)}</span>
          </i18n>
        ]
      }

      if(action == '审批发起') {
        return [
          <i18n path={`common.record.repository.approve['${content.action}']`} tag="h5" class="main-info">
            <span place="operator">{this.renderUserName(userName, staffId)}</span>
          </i18n>,
          <p class="secondary-info">{this.$t('common.label.approvalRemark')}：
            <biz-comment-html html={content.remark}></biz-comment-html>
          </p>
        ]
      }

      if(action == '审批成功') {
        return [
          <h5 class="main-info">
            {this.renderUserName(userName, staffId)} <span style="color: #00AC97">{t('common.record.repository.pass')}</span>
          </h5>,
          <p class="secondary-info">{this.$t('common.label.approvalRemark')}：
            <biz-comment-html html={content.remark}></biz-comment-html>
          </p>
          
        ]
      }

      if(action == '审批拒绝') {
        return [
          <h5 class="main-info">
            {this.renderUserName(userName, staffId)} <span style="color: #F13E47">{t('common.record.repository.refuse')}</span>
          </h5>,
          <p class="secondary-info" style="color: #F13E47">{t('task.refuseReason')}：
            <biz-comment-html html={content.remark}></biz-comment-html>
          </p>
        ]
      }

      if(action == '审批撤回') {
        return [
          <i18n path="common.record.repository.withdraw" tag="h5" class="main-info">
            <span place="operator">{this.renderUserName(userName, staffId)}</span>
          </i18n>
        ]
      }

      if (action === '连接器to') return this.renderConnectorTo(item)
      if (action === '连接器from') return this.renderConnectorFrom(item)
      if (action === '触发器to') return this.renderTriggerTo(item)
      if (action === '触发器from') return this.renderTriggerFrom(item)

    },
    renderUserName(userName, staffId){
      if(isOpenData && staffId) return <strong>{<open-data type="userName" openid={staffId}></open-data>}</strong>
      return <strong>{userName}</strong>
    },
  }
}
</script>

<style lang="scss">
.document-update-log {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  
  .title {
    height: 45px;
    line-height: 45px;

    font-size: 16px;

    padding-left: 15px;
    border-bottom: 1px solid #D8E5EE;
  }

  .document-timeline {
    flex: 1;
    overflow: auto;
    padding: 15px 15px 0 0;
    .secondary-info {
      max-width: 350px;
    }
  }
}
</style>